import React, {Component, Fragment} from 'react';
import { Card, Button, Radio } from 'antd';
import './ui.less';

const ButtonGroup = Button.Group;

class Buttons extends Component {

    state = {
        load: true,
        size: 'default'
    };

    handleLoadingClick = () => {
        this.setState(preState => ({
            load: !preState.load
        }));
    };

    handleChangeSize = (e) => {
        this.setState({
            size: e.target.value
        });
    };

    render() {
        return (
            <Fragment>
                <Card title={'基础按钮'} className={'card-wrap'}>
                    <Button>默认按钮</Button>
                    <Button type={'primary'}>Primary按钮</Button>
                    <Button type={'dashed'}>虚线按钮</Button>
                    <Button type={'danger'}>删除按钮</Button>
                    <Button disabled>禁用按钮</Button>
                </Card>
                <Card title={'图形按钮'} className={'card-wrap'}>
                    <Button icon={'plus'}>创建</Button>
                    <Button icon={'edit'}>编辑</Button>
                    <Button type={'danger'} icon={'delete'}>删除</Button>
                    <Button type={'primary'} shape={'circle'} icon={'search'}/>
                    <Button type={'primary'} icon={'search'}>搜索</Button>
                    <Button icon={'upload'}>上传</Button>
                    <Button icon={'download'}>下载</Button>
                </Card>
                <Card title={'Loading加载按钮'} className={'card-wrap'}>
                    <Button loading={this.state.load} type={'primary'}>确定</Button>
                    <Button loading={this.state.load} type={'primary'} shape={'circle'} />
                    <Button loading={this.state.load} onClick={this.handleLoadingClick}>点击加载</Button>
                    <Button loading={this.state.load} shape={'circle'} />
                    <Button type={'primary'} onClick={this.handleLoadingClick}>关闭</Button>
                </Card>
                <Card title={'按钮组'} style={{marginBottom: '20px'}}>
                    <ButtonGroup>
                        <Button type={'primary'} icon={'left'}>返回</Button>
                        <Button type={'primary'} icon={'right'}>前进</Button>
                    </ButtonGroup>
                </Card>
                <Card title={'按钮尺寸'} className={'card-wrap'}>
                    <Radio.Group value={this.state.size}
                                 onChange={this.handleChangeSize}
                    >
                        <Radio value={'small'}>小</Radio>
                        <Radio value={'default'}>中/默认</Radio>
                        <Radio value={'large'}>大</Radio>
                    </Radio.Group>
                    <Button>默认按钮</Button>
                    <Button size={this.state.size} type={'primary'}>Primary按钮</Button>
                    <Button size={this.state.size} type={'dashed'}>虚线按钮</Button>
                    <Button size={this.state.size} type={'danger'}>删除按钮</Button>
                    <Button size={this.state.size} disabled>禁用按钮</Button>
                </Card>
            </Fragment>
        );
    }
}

export default Buttons;